<template>
    <div class="search">
      <div class="search_select">
        <van-field
          readonly
          clickable
          right-icon="arrow-down"
          name="picker"
          :value="value"
          label=""
          placeholder=""
          @click="showPicker = true"
        />
      </div>
      <div class="search_input">
        <van-search
          v-model="keywords"
          shape="round"
          background="#ffffff"
          placeholder="请输入搜索关键词"
        />
      </div>

      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="productColumns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
</template>

<script>
    export default {
        name: "searchView",
      props: {
        productColumns: {
          type: Array,
          default() {
            return []
          }
        },
      },
      data() {
        return {
          keywords:'',
          showPicker: false,
        };
      },

      methods: {
        onConfirm(value) {
          this.value = value.text;
          this.showPicker = false;
          this.$emit('getPid',value.id)
        },
      },
    }
</script>

<style scoped>
  .search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
  }
  .search_select{
    width: 30%
  }
  .search_input{
    flex: 1;
  }
</style>
